*{
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,
    "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;

}
body {
    /* font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
    margin: 0;
    text-decoration: none;
    padding: 0;
    color: #333;
    background: #fff;

}
h3{line-height: 30px;font-size: 24px;color: #333333;font-weight: normal;}
a{text-decoration: none;color: #333333;}
li{ list-style: none;}
img{transition: all 1s;cursor: pointer;}
img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
a:hover{color:#3498db;text-decoration: none;}
/*头部导航栏*/
.homeheader{height:  64px; width:100%; background: #202020; color: white; margin: 0;padding: 0;}

.homeheader .centre{height: 100%;width: 80%;margin: 0 auto;}

.homeheader .centre .left{height:100%;float: left;}
.homeheader .centre .left img{height:100%;}

.homeheader .centre .homeheader_centre{height: 100%; width: 60%;float: left;display: flex;justify-content: space-evenly;}
.homeheader .centre .homeheader_centre li{height:100%; line-height: 64px; font-size: 0.9rem; color: #FFFFFF;}
.homeheader .centre .homeheader_centre li a{color: #FFFFFF; font-size: 1.5rem;}
.homeheader .centre .homeheader_centre li a:hover{color: #3498db;}

.homeheader .centre .right{float: left;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right input{height: 14px;width: 148px;font-size: 14px; padding: 10px 58px 10px 16px;background: #fff;outline-style: none;outline-width: 0;border-radius: 16px;border: none;margin-top: calc(64px - 38px - 9px);color: #666666;}
.homeheader .centre .right .searchBtn{display:block;position: relative;right: -190px;top: -22px;width: 20px;height: 30px;z-index:3;background: url() no-repeat center center;background-size: cover;}

.homeheader .centre .right-img{height: 100%; float: right;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right-img img{height: 50px;width: 50px; border-radius: 50%;}


/*肚子*/
article{width: 80%;margin: 0 auto;}
.article-1{width: 100%;height: 100px;display: none;line-height: 100px;}
.article-1 .article-1-box{width: 100%;height: 50%;}
.article-1 .article-1-box img{height: 50px;width: 50px; border-radius: 50%;float:left;display: none;}
.article-1 .article-1-box .user-name{font-size: 1em;color: #999999;margin-left: 20px;height: 50px;line-height: 50px;float:left;display: none;}

.div-box{width: 100%;}
.div-box .div-box-navigation{width: 100%;clear: both;}
.div-box .div-box-navigation a{width: 20%;height: 40px;line-height: 40px;color: #999999;cursor: pointer;border-radius: 5px;display: block;float: left;margin-left: 2%;}

.div-box .div-box-data{width: 100%;clear: both;}


/*提示*/
.div-usernull{width: 20%;height: 20%;margin: 0 auto; text-align: center;}
.div-usernull img{width: 100%;height: 100%;}
.div-usernull span{font-size: 1em;color: #999999;}


/*收藏*/

.div-box-data .articl-1-2{width: 100%;padding: 0; margin-top: 30px;display: flex;justify-content: space-between;flex-wrap:wrap;}
.articl-1-2 .articl-1-2-box{ margin-top: 30px;height: 289px;width: 15%;}
.articl-1-2 .articl-1-2-box a img{height: 270px;width: 100%;border-radius: 5px; transition: all 1s; }
.articl-1-2 .articl-1-2-box a img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
.articl-1-2 .articl-1-2-box a div{height: 20px;width: 100%; position:relative;top: 0px;color: white;margin: 0;}
.articl-1-2 .articl-1-2-box a div span{font-size: 0.5em;}
.articl-1-2 .articl-1-2-box a div span:hover{color:#3498db;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-left{float: left;margin-left: 3px;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-right{float: right; margin-right: 3px;}
.articl-1-2 .articl-1-2-box a span{position:relative;top: -20px;}
.articl-1-2 .articl-1-2-box a span:hover{color:#3498db;}
